<template >
  <div>
    <zh-space style="padding-top: 10px">
      <zh-card title="">
        <zh-form ref="queryForm" :model="state.queryParam" >
          <zh-form-input v-model="state.queryParam.funcCode"
                         label="接口编码" placeholder="支持模糊查询" >
          </zh-form-input>
          <zh-form-input v-model="state.queryParam.funcTitle"
                         label="接口名称" placeholder="支持模糊查询" >
          </zh-form-input>
          <zh-form-select
              prop="appId"
              :lazy="true"
              label="所属应用"
              v-model="state.queryParam.appId"
              :fieldNames="{ label: 'appName', value: 'appId' }"
              funcCode="application0012"
              searchField="appName"
          ></zh-form-select>
          <zh-form-query :span="24" :showAdvanced="false" :form-ref="queryForm"
                         :table-ref="apiConsumerTable">
          </zh-form-query>
        </zh-form>
      </zh-card>
      <zh-table
          ref="apiConsumerTable"
          title=""
          :height="600"
          funcCode="APICONSUMER0001"
          :columns="state.tableColumn"
          :radio-config="{ trigger: 'row' }"
          :disabled="false"
          highlight-current-row
      >
        <template #op="{row}">
          <zh-button buttonType="query" @click="query(row)" >详情</zh-button>
          <zh-button v-if="row.consumerAuth!='3'" buttonType="del" @click="cancel(row)" >作废</zh-button>
        </template>
      </zh-table>
    </zh-space>
    <zh-dialog
        v-model="state.consumerVisible"
        title="接口申请信息"
        width="30%"
        confirmButtonText="确认"
        @confirm="closeConsumer"
    >
      <consumer-info ref="consumerInfoPage" :displayFlag="true"/>

    </zh-dialog>
  </div>
</template>
<script lang="ts" setup name="apiConsumer">
import ConsumerInfo from '@/views/apiCenter/ApiConsumer/component/ConsumerInfo.vue';
import {ElMessageBox} from "element-plus";
import {auth} from "@/utils/authFunction";

//-----------自定义子组件-------------
const queryForm = ref<any>({});
const apiConsumerTable = ref<any>({});
const consumerInfoPage=ref();


const state = reactive({
  consumerVisible:false,
  queryParam:{
    funcCode:'',
  },
  dictData:[],
  tableColumn:[
    {field: 'funcTitle', title: '接口名称',fixed: 'left',  align: 'center', width: 150},
    {field: 'appName', title: '所属应用', fixed: 'left', align: 'center',width: 150},
    {field: 'param2', title: '接口调用地址', visible:true,align: 'center',width: 450, mindWidth: 450},
    {field: 'envName', title: '所属环境', visible:false,align: 'center', mindWidth: 100},
    {field: 'param1', title: '接口调用编码', visible:true, align: 'center',width:200},
    {field: 'funcCode', title: '申请接口编码', visible:true, align: 'center',width:200},
    {field: 'statusName', title: '有效状态',  align: 'center', width: 100},
    {field: 'visits', title: '每日访问上限次数',  align: 'center', width: 100},
    {field: 'frequency', title: '调用频次(s)',  align: 'center', width: 100},
    {field: 'consumerAuthName', title: '审核状态',  align: 'center',width: 100},
    { field: 'op', title: '操作', visible: true, align: 'center', width: 250, fixed: 'right', slots: { default: 'op' } },
  ]
});

//---------------------初始化---------------------
function query(row){
  state.consumerVisible=true;
  nextTick(()=>{
    let consumerInfo={
      consumerId:row.consumerId
    }
    consumerInfoPage.value.setInitDate(consumerInfo);
  })
}
onMounted(() =>{
  apiConsumerTable.value.query();
})
function cancel(row){
  ElMessageBox.confirm(
      '将要作废本次接口申请是否继续',
      '提示',
      {
        confirmButtonText: '继续',
        type: 'warning',
        showCancelButton: false
      }
  ).then(() => {
    //根据id作废接口申请
    $api.common.send.post('APICONSUMER0006', {consumerId:row.consumerId}).then(() => {
      $messageBox.success('作废成功', '提示');
      apiConsumerTable.value.query();
    }).catch(() => {});
  });
}

function closeConsumer(){
  state.consumerVisible=false;
}
</script>
